<template>
  <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      :default-sort = "{prop: 'date', order: 'descending'}"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column type="expand">
      <template #default="props">
        <el-table :data="props.row.ChildObject" label-position="left" inline class="demo-table-expand">
          <el-table-column label="反馈理由" prop="content">
          </el-table-column>
          <el-table-column label="反馈凭证" prop="pic_path">
            <template #default="scope">
              <el-image  :src="url+scope.row.pic_path" min-width="70" height="70" alt="" :preview-src-list="url+scope.row.pic_path"></el-image>
              <!--            v-for="item in scope.row.pic_path.split(',')" v-if="item ? item : '' "-->
            </template>
          </el-table-column>
          <el-table-column label="反馈时间" prop="feedback_Time">
          </el-table-column>
          <el-table-column label="回复时间" prop="fJudge_Time">
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column
        label="Date"
        sortable
        prop="feedback_Time">
    </el-table-column>
    <el-table-column label="反馈信息">
      <el-table-column
          label="姓名"
          prop="name">
      </el-table-column>
      <el-table-column
          label="班级"
          prop="class">
      </el-table-column>
      <el-table-column
          label="学号"
          prop="account">
      </el-table-column>
      <el-table-column label="状态" prop="state">
        <template #default="scope">
            <span v-if="scope.row.state===0">
              <i class="el-icon-info" style="color: #ccec5b" aria-hidden="true"></i>
            </span>
          <span v-if="scope.row.state===1">
              <i class="el-icon-success" style="color: #39cf7c" aria-hidden="true"></i>
            </span>
          <span v-if="scope.row.state===2">
              <i class="el-icon-error" style="color: #ED3F14" aria-hidden="true"></i>
            </span>
          <span :style="{ color: scope.row.state === 1 ? '#39cf7c' :scope.row.state === 2 ? '#ED3F14':'#ccec5b' }">{{ scope.row.state === 1 ? '已回复':scope.row.state === 2 ?'已忽略':'待回复' }}</span>
        </template>
      </el-table-column>
      <el-table-column
          align="right">
        <template #header>
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template #default="scope">
          <template v-if="scope.row.state===0">
            <el-button
              size="mini"
              @click="handleApproval(scope.$index, scope.row)">回复</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleIgnore(scope.$index, scope.row)">忽略</el-button>
          </template>
          <template v-if="scope.row.state===1">已回复</template>

        </template>
      </el-table-column>
    </el-table-column>

  </el-table>
</template>
<script lang="ts">
import {getCurrentInstance} from "vue";
import qs from "qs";
import {getAllFeedBack} from "@/network/manager/getAllFeedBack";
import {ReplyToStudentFeedback} from "@/network/manager/ReplyToStudentFeedback";
import {IgnoreStudentFeedback} from "@/network/manager/IgnoreStudentFeedback";

export default {
  name:'LocalStudentFeedBack',
  data(){
    return{
      tableData: [],
      search: '',
      url: 'http://localhost:7070'
    }
  },
  setup(){
    const {proxy}:any=getCurrentInstance();
    const Manager_id=localStorage.getItem('ManagerId')
    console.log(Manager_id)
    getAllFeedBack(Manager_id).then(result=>{
      console.log(result.data.result)
      proxy.tableData=result.data.result
    }).catch(err=>{

    })

    function handleApproval(index, row) {
      console.log(index, row);
      console.log(row.fid)//获取fid
      console.log(row.sid)//获取sid
      const ReplyToStudentFeedback_fid=row.fid
      proxy.$prompt('请输入批复', '批复', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        console.log(value)
        const ReplyToStudentFeedback_data={
          sid:row.sid,
          content:value
        }
        ReplyToStudentFeedback(ReplyToStudentFeedback_fid,qs.stringify(ReplyToStudentFeedback_data)).then(result=>{
          proxy.$message({
            type: 'success',
            message: '批复成功'
          });
          console.log(value)
        })
        //

        //
      }).catch(() => {
        proxy.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
    function handleIgnore(index, row) {
      console.log(index, row);
      console.log(row.fid)//获取fid
      console.log(row.sid)//获取sid
      const ReplyToStudentFeedback_fid=row.fid
      const IgnoreStudentFeedback_data={
        sid:row.sid
      }
      proxy.$confirm('是否继续忽略此反馈?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        IgnoreStudentFeedback(ReplyToStudentFeedback_fid,qs.stringify(IgnoreStudentFeedback_data)).then(result=>{
          proxy.$message({
            type: 'success',
            message: '忽略成功!'
          });
        })
        //

        //
      }).catch(() => {
        proxy.$message({
          type: 'info',
          message: '已取消忽略'
        });
      });

    }

    return{
      handleApproval,
      handleIgnore,
    }
  }
}
</script>
